<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />
 
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery.contextmenu.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/jquery.tablednd.js" type="text/javascript"></script>

<p style="font-size:12px;">
Thanks again to Mark Williams creating this wonderfull feature - loading data while scrolling <br>
Note how the data is loaded and the requests to the server!<br>
Enjoy the feature and speed!

<table id="scrolling"></table>
<div id="pscrolling"></div>
<script src="36scrolling.js" type="text/javascript"> </script>
<br />
<div style="font-size:12px;">
<b> HTML </b>
<XMP>
...
<table id="scrolling"></table>
<div id="pscrolling"></div>
</XMP>    
<b>Java Scrpt code</b>
<XMP>
jQuery("#scrolling").jqGrid({        
    scroll: 1,
   	url:'bigset.php',
	datatype: "json",
	height: 255,
	width: 600,
   	colNames:['Index','Name', 'Code'],
   	colModel:[
   		{name:'item_id',index:'item_id', width:65},
   		{name:'item',index:'item', width:150},
   		{name:'item_cd',index:'item_cd', width:100}
   	],
   	rowNum:100,
   	mtype: "GET",
	rownumbers: true,
	rownumWidth: 40,
	gridview: true,
   	pager: '#pscrolling',
   	sortname: 'item_id',
    viewrecords: true,
    sortorder: "asc",
	caption: "Loading data while scrolling"	
});</XMP>
</div>